function tab() {


    $('.li1').on('click', function () {
        $('.nav li').prop('class', 'nav-other')
        $('.nav>ul>a>li').prop('class', 'nav-index')
        $(this).prop('class', 'nav-this')
       console.log('事件1');
        console.log('');
        let inner = `
                <div id="headerText" class="container">
                <div class="top">9块9专区</div>
                <div class="buttonChoose">
                    <ul class="clearfix">
                        <li class="active" data-index="7"> 精选 </li>
                        <li class="" data-index="1"> 美妆护肤 </li>
                        <li class="" data-index="2"> 服装配饰 </li>
                        <li class="" data-index="3"> 手机数码 </li>
                        <li class="" data-index="4"> 日用家居 </li>
                        <li class="" data-index="5"> 文娱体育 </li>
                        <li class="" data-index="6"> 食品 </li>
                        <li class="" data-index="7"> 个人护理 </li>
                    </ul>
                </div>
            </div>
            <!-- 生成 -->
            <!-- 固定商品列表 -->
            <div id="fixedList" class="container">
                <ul class="clearfix"></ul>
            </div>

            <div class="SeeMore container">
                <div>查看更多</div>
            </div>
        `
        $('#navCarousel').html(inner)
        SwitchContent()
    })

    $('.li2').on('click', function () {
        console.log('事件2');
        $('.nav li').prop('class', 'nav-other')
        $('.nav>ul>a>li').prop('class', 'nav-index')
        $(this).prop('class', 'nav-this')
        let inner = `
                <div id="headerText" class="container">
                <div class="top">超值大额券</div>
                <div class="buttonChoose">
                    <ul class="clearfix">
                        <li class="active" data-index="174"> 精选 </li>
                        <li class="" data-index="175"> 美妆护肤 </li>
                        <li class="" data-index="176"> 小家电 </li>
                        <li class="" data-index="177"> 箱包 </li>
                        <li class="" data-index="178"> 服装配饰 </li>
                    </ul>
                </div>
            </div>
            <!-- 生成 -->
            <!-- 固定商品列表 -->
            <div id="fixedList" class="container">
                <ul class="clearfix"></ul>
            </div>

            <div class="SeeMore container">
                <div>查看更多</div>
            </div>
        `
        $('#navCarousel').html(inner)
        SwitchContent()
    })    
}

tab()




function SwitchContent() {
    $('.buttonChoose ul').on('click', 'li', function () {
        console.log('123123');
        $('.buttonChoose ul li').prop('class','')
        $(this).prop('class', 'active')

        let indexNum=$(this).attr('data-index')
            sole.log(indexNum);
        
        function getNetwork(pageNo) {//获取商品列表数据
            let startNum=pageNo*20
            $.ajax({
                url: `http://www.xiongmaoyouxuan.com/api/sub_column/${indexNum}/items?start=`+startNum,
                type: 'get',
                success: function (res) {
                    showProduct(res.data.list)
                },
                error: function (error) {
                    alert('网络错误')
                }
            })
        }
        
        let listAll=[]//用于拼接数据
        function showProduct(ProductList) {//渲染商品列表
            listAll=[...listAll,...ProductList]
            let arr = listAll.map(item => {
                return `
                <li class="pro-item" onclick="onDetail(${item.id})">
                    <img src="${item.image}">
                    <p>${item.title}</p>
                    <div class="pro-merchant">
                        <span class="left">天猫</span>
                        <span class="right">包邮</span>
                    </div>
                    <div class="pro-sales">
                        <span class="left-money">￥</span>
                        <span class="left">${item.price}</span>
                        <span class="right">${item.saleNum}人已买</span>
                        <span class="tickt">${item.couponValue}</span>
                </div>
                `
            })
            let str = arr.join('')
            $('#fixedList>ul').html(str)
        }
        
        function onLoadMore() {
            let pageNo = 1
            getNetwork(pageNo)
            $('.SeeMore>div').on('click', function () {
                getNetwork(++pageNo)
            })
        }
        
        function onDetail(id) {
            location.href='./datetil.html?id='+id
        }
        onLoadMore()
    })

}

function getNetwork(pageNo) {//获取商品列表数据
    let startNum=pageNo*20
    $.ajax({
        url: 'http://www.xiongmaoyouxuan.com/api/sub_column/7/items?start='+startNum,
        type: 'get',
        success: function (res) {
            showProduct(res.data.list)
        },
        error: function (error) {
            alert('网络错误')
        }
    })
}

let listAll=[]//用于拼接数据
function showProduct(ProductList) {//渲染商品列表
    listAll=[...listAll,...ProductList]
    let arr = listAll.map(item => {
        return `
        <li class="pro-item" onclick="onDetail(${item.id})">
            <img src="${item.image}">
            <p>${item.title}</p>
            <div class="pro-merchant">
                <span class="left">天猫</span>
                <span class="right">包邮</span>
            </div>
            <div class="pro-sales">
                <span class="left-money">￥</span>
                <span class="left">${item.price}</span>
                <span class="right">${item.saleNum}人已买</span>
                <span class="tickt">${item.couponValue}</span>
        </div>
        `
    })
    let str = arr.join('')
    $('#fixedList>ul').html(str)
}

function onLoadMore() {
    let pageNo = 1
    getNetwork(pageNo)
    $('.SeeMore>div').on('click', function () {
        getNetwork(++pageNo)
    })
}

function onDetail(id) {
    location.href='./datetil.html?id='+id
}

SwitchContent()
onLoadMore()

function outputTop() {    //回到顶部
    let i = document.documentElement.scrollTop
    let timer = setInterval(function () {
        i=i-20
        if (i <= 0) {
            clearInterval(timer)
            
        }
        document.documentElement.scrollTop = i
    }, 1)
}

window.onscroll = function () {    
console.log('浏览器');
let i = document.documentElement.scrollTop
console.log(i);
if (i <= 0) {
    $('#return').css('display','none')        
} else {
    $('#return').css('display','block')        
}
}